<template>
    <el-dialog :visible.sync="visible" :width="width" :lock-scroll="true" v-if="visible" :close-on-click-modal="false" top="40px"
        class="login-dialog" :class="{ 'is-mobile': $isMobile }" :close-on-press-escape="false" center
        :append-to-body="true">
        <component :is="mode" @changeMode="changeMode" @refresh="refresh"></component>
    </el-dialog>
</template>

<script>
import login from './login.vue';
import register from './register.vue';
export default {
    components: {
        login,
        register
    },

    computed: {

        top() {
            if (this.$isMobile) {
                return '50px';
            } else {
                return '15vh';
            }
        },

        width() {
            if (this.$isMobile) {
                return 'calc(100vw - 20px)';
            } else {
                return '480px';
            }
        }
    },


    data() {
        return {
            visible: false,
            mode: 'login',
            fns: []
        }
    },


    methods: {

        init(fns) {
            this.fns = fns;
        },

        close() {
            this.refresh();
        },

        show(mode = 'login', fns) {
            this.visible = true;
            this.mode = mode;

        },

        changeMode(mode) {
            this.mode = mode;
        },

        refresh() {
            this.visible = false;
            this.fns.forEach(element => {
                element && element()
            });
        }

    }

}

</script>

<style lang="less" scoped>

/deep/ .el-dialog--center .el-dialog__body  {
    padding: 10px;
}
.login-dialog.is-mobile {
    /deep/ .el-form-item__content {
        width: 100%;
    }

    /deep/ .el-input__inner {
        width: 100%;
    }

    /deep/ .el-dialog__body {
        padding: 10px;
    }

    /deep/ .el-input {
        width: 100%;

        .el-input__inner {
            border-radius: 4px;
            border: 1px solid #d8d8d8;
        }
    }

    /deep/ .el-form-item {
        width: 100%;
    }
}
</style>